<template>
  <view class="container">
    <!-- 充电状态图片 -->
    <view class="charging-image-section">
      <image src="https://tg-spcs.oss-cn-hangzhou.aliyuncs.com/static/images/charging-animation.svg" class="charging-image" mode="aspectFit" />
      <text class="charging-status">充电中</text>
    </view>

    <!-- 充电数据显示区域 -->
    <view class="charging-data-section">
      <view class="data-row">
        <view class="data-item">
          <text class="data-label">充电时长</text>
          <text class="data-value">{{ chargingData.duration }}</text>
        </view>
        <view class="data-item">
          <text class="data-label">剩余时间</text>
          <text class="data-value">{{ chargingData.remainingTime }}</text>
        </view>
      </view>
      <view class="data-row">
        <view class="data-item">
          <text class="data-label">功率</text>
          <text class="data-value">{{ chargingData.power }}kW</text>
        </view>
        <view class="data-item">
          <text class="data-label">电压</text>
          <text class="data-value">{{ chargingData.voltage }}V</text>
        </view>
      </view>
      <view class="data-row">
        <view class="data-item">
          <text class="data-label">电流</text>
          <text class="data-value">{{ chargingData.current }}A</text>
        </view>
        <view class="data-item">
          <text class="data-label">当前费用</text>
          <text class="data-value cost">¥{{ chargingData.currentCost }}</text>
        </view>
      </view>
    </view>

    <!-- 充电时段和价格 -->
    <view class="pricing-section">
      <view class="pricing-header" @click="showPricingModal = true">
        <view class="pricing-info">
          <text class="pricing-title">当前时段：{{ currentPeriod.name }}</text>
          <text class="pricing-rate">{{ currentPeriod.price }}元/度</text>
        </view>
        <uni-icons type="right" size="16" color="#999"></uni-icons>
      </view>
    </view>

    <!-- 结束充电按钮 -->
    <view class="action-section">
      <button class="stop-charging-btn" @click="stopCharging">结束充电</button>
    </view>

    <!-- 时段收费列表弹窗 -->
    <view v-if="showPricingModal" class="modal-overlay" @click="showPricingModal = false">
      <view class="pricing-modal" @click.stop>
        <view class="modal-header">
          <text class="modal-title">时段收费标准</text>
          <uni-icons type="closeempty" size="20" @click="showPricingModal = false"></uni-icons>
        </view>
        <view class="pricing-list">
          <view v-for="(period, index) in pricingPeriods" :key="index" class="pricing-item" :class="{ active: period.id === currentPeriod.id }">
            <view class="period-info">
              <text class="period-name">{{ period.name }}</text>
              <text class="period-time">{{ period.timeRange }}</text>
            </view>
            <text class="period-price">{{ period.price }}元/度</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import { onLoad } from '@dcloudio/uni-app'

// 充电数据
const chargingData = ref({
  duration: '01:23:45',
  remainingTime: '00:36:15',
  power: '7.2',
  voltage: '220',
  current: '32.7',
  currentCost: '12.50'
})

// 当前时段
const currentPeriod = ref({
  id: 2,
  name: '平时段',
  price: '1.2'
})

// 时段收费列表
const pricingPeriods = ref([
  {
    id: 1,
    name: '峰时段',
    timeRange: '08:00-12:00, 18:00-22:00',
    price: '1.8'
  },
  {
    id: 2,
    name: '平时段',
    timeRange: '12:00-18:00',
    price: '1.2'
  },
  {
    id: 3,
    name: '谷时段',
    timeRange: '22:00-08:00',
    price: '0.8'
  }
])

// 弹窗显示状态
const showPricingModal = ref(false)

// 定时器
let timer = null

// 页面加载
onLoad((options) => {
  console.log('充电详情页面加载', options)
  startDataUpdate()
})

// 页面卸载
onUnmounted(() => {
  if (timer) {
    clearInterval(timer)
  }
})

// 开始数据更新
const startDataUpdate = () => {
  timer = setInterval(() => {
    updateChargingData()
  }, 1000)
}

// 更新充电数据
const updateChargingData = () => {
  // 模拟实时数据更新
  const cost = parseFloat(chargingData.value.currentCost)
  chargingData.value.currentCost = (cost + 0.01).toFixed(2)
  
  // 更新充电时长
  const [hours, minutes, seconds] = chargingData.value.duration.split(':').map(Number)
  let totalSeconds = hours * 3600 + minutes * 60 + seconds + 1
  const newHours = Math.floor(totalSeconds / 3600)
  const newMinutes = Math.floor((totalSeconds % 3600) / 60)
  const newSeconds = totalSeconds % 60
  chargingData.value.duration = `${String(newHours).padStart(2, '0')}:${String(newMinutes).padStart(2, '0')}:${String(newSeconds).padStart(2, '0')}`
  
  // 更新剩余时间
  const [rHours, rMinutes, rSeconds] = chargingData.value.remainingTime.split(':').map(Number)
  let remainingTotalSeconds = rHours * 3600 + rMinutes * 60 + rSeconds - 1
  if (remainingTotalSeconds <= 0) {
    remainingTotalSeconds = 0
    chargingData.value.remainingTime = '00:00:00'
  } else {
    const rNewHours = Math.floor(remainingTotalSeconds / 3600)
    const rNewMinutes = Math.floor((remainingTotalSeconds % 3600) / 60)
    const rNewSeconds = remainingTotalSeconds % 60
    chargingData.value.remainingTime = `${String(rNewHours).padStart(2, '0')}:${String(rNewMinutes).padStart(2, '0')}:${String(rNewSeconds).padStart(2, '0')}`
  }
}

// 结束充电
const stopCharging = () => {
  uni.showModal({
    title: '确认结束充电',
    content: '确定要结束当前充电吗？',
    success: (res) => {
      if (res.confirm) {
        if (timer) {
          clearInterval(timer)
        }
        // 跳转到充电订单页面
        uni.navigateTo({
          url: '/pages/charge/order?orderId=123456'
        })
      }
    }
  })
}
</script>

<style scoped>
.container {
  padding: 20rpx;
  background-color: #f5f5f5;
  min-height: 100vh;
}

.charging-image-section {
  background: white;
  border-radius: 20rpx;
  padding: 40rpx;
  margin-bottom: 20rpx;
  text-align: center;
}

.charging-image {
  width: 200rpx;
  height: 200rpx;
  margin-bottom: 20rpx;
}

.charging-status {
  font-size: 32rpx;
  font-weight: bold;
  color: #2DCC72;
}

.charging-data-section {
  background: white;
  border-radius: 20rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
}

.data-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 30rpx;
}

.data-row:last-child {
  margin-bottom: 0;
}

.data-item {
  flex: 1;
  text-align: center;
}

.data-label {
  display: block;
  font-size: 24rpx;
  color: #999;
  margin-bottom: 10rpx;
}

.data-value {
  display: block;
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}

.data-value.cost {
  color: #ff6b35;
}

.pricing-section {
  background: white;
  border-radius: 20rpx;
  margin-bottom: 20rpx;
}

.pricing-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 30rpx;
}

.pricing-info {
  flex: 1;
}

.pricing-title {
  display: block;
  font-size: 28rpx;
  color: #333;
  margin-bottom: 10rpx;
}

.pricing-rate {
  display: block;
  font-size: 24rpx;
  color: #ff6b35;
  font-weight: bold;
}

.action-section {
  padding: 20rpx 0;
}

.stop-charging-btn {
  width: 100%;
  height: 88rpx;
  background: #ff6b35;
  color: white;
  border: none;
  border-radius: 44rpx;
  font-size: 32rpx;
  font-weight: bold;
}

.stop-charging-btn:active {
  background: #e55a2b;
}

/* 弹窗样式 */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1000;
  display: flex;
  align-items: flex-end;
}

.pricing-modal {
  width: 100%;
  background: white;
  border-radius: 20rpx 20rpx 0 0;
  max-height: 80vh;
  overflow: hidden;
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 30rpx;
  border-bottom: 1rpx solid #eee;
}

.modal-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}

.pricing-list {
  padding: 20rpx 0;
  max-height: 60vh;
  overflow-y: auto;
}

.pricing-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 25rpx 30rpx;
  border-bottom: 1rpx solid #f5f5f5;
}

.pricing-item.active {
  background: #f0f9ff;
}

.pricing-item:last-child {
  border-bottom: none;
}

.period-info {
  flex: 1;
}

.period-name {
  display: block;
  font-size: 28rpx;
  color: #333;
  margin-bottom: 8rpx;
}

.period-time {
  display: block;
  font-size: 24rpx;
  color: #999;
}

.period-price {
  font-size: 28rpx;
  font-weight: bold;
  color: #ff6b35;
}
</style>